<template>
    <div class="scores">
      <h1>我的成绩</h1>
      <el-table :data="scores" style="width: 100%">
        <el-table-column prop="exam.title" label="考试名称" />
        <el-table-column prop="score" label="分数" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="$router.push(`/score/${row.id}`)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import api from '../api';
  import { ElMessage } from 'element-plus';
  
  const scores = ref([]);
  
  onMounted(async () => {
    try {
      const response = await api.scores.getScores();
      scores.value = response.data.items;
    } catch (error) {
      ElMessage.error('加载成绩列表失败');
    }
  });
  </script>
  
  <style scoped>
  .scores {
    padding: 20px;
  }
  </style>